<!--  -->
<template>
	<div>
		<div id="legend" style="height: 270px; width: 90%;"></div>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')

import { fetchAppraiseStatistics } from '@/api/user.js'
export default {
	props: {
		staff_sn: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			staff_sn_data: this.staff_sn
		}
	},

	//生命周期 - 创建完成（访问当前this实例）
	created() {},
	watch: {
		staff_sn() {
			this.appraiseStatistics()
		}
	},
	//生命周期 - 挂载完成（访问DOM元素）
	mounted() {},
	methods: {
		// 员工评价统计
		async appraiseStatistics() {
			try {
				let ret = await fetchAppraiseStatistics({
					staff_sn: this.staff_sn
				})
				this.drawLine(ret)
			} catch (error) {
				console.log('error:', error)
			}
		},

		drawLine(dataParam) {
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById('legend'))
			console.log(myChart)
			// 绘制图表
			myChart.setOption({
				title: {
					text: '店铺评价',
					textStyle: {
						fontSize: 14
					},
					x: '30%',
					y: 'bottom'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b} : {c} ({d}%)'
				},
				//左上侧分类条形符
				legend: {
					orient: 'vertical',
					x: 'right',
					right: 0,
					data: [
						{ name: '1星', value: dataParam.one },
						{ name: '2星', value: dataParam.two },
						{ name: '3星', value: dataParam.three },
						{ name: '4星', value: dataParam.four },
						{ name: '5星', value: dataParam.five }
					]
				},
				series: {
					type: 'pie',
					center: ['40%', '50%'],
					data: [
						{ name: '1星', value: dataParam.one },
						{ name: '2星', value: dataParam.two },
						{ name: '3星', value: dataParam.three },
						{ name: '4星', value: dataParam.four },
						{ name: '5星', value: dataParam.five }
					],
					label: {
						normal: {
							show: true,
							position: 'inner',
							textStyle: {
								fontWeight: 200,
								fontSize: 20 //文字的字体大小
							},
							formatter: function (params) {
								if (params.percent == 0) {
									return ''
								} else {
									return params.percent + '%'
								}
							},
							fontSize: 18
						}
					}
				}
			})
		}
	}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>



// WEBPACK FOOTER //
// src/components/components/echarts/LegendFan.vue